<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!--标签-->

<h3>Example Heading <label class="label label-default">hot</label></h3>
<h3>Example Heading <label class="label label-danger">hot</label></h3>
<h3>Example Heading <label class="label label-success">hot</label></h3>
<h3>Example Heading <label class="label label-info">hot</label></h3>
<h3>Example Heading <label class="label label-primary">hot</label></h3>

<hr>
<!--徽章-->

<a href="#" role="button"class="btn btn-default">default<span class="badge">23</span></a>
<button class="btn btn-info">info<span class="badge">12</span></button>

<hr>

<div class="jumbotron">
    <div class="container">
        <h1>hello world</h1>
        <p> This is a simple hero unit, a simple jumbotron-style
            component for calling extra attention to featured content or information.</p>
        <button type="button" class="btn btn-primary">primary</button>
    </div>

</div>

<script src="bootstrap/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>